<template>
  <div class='tosend first-box'>
    <div class="tab-box">
      <Tab :listData="tabData" :selected="selectedIndex" :className="{padding80:true}"></Tab>
    </div>
    
    <p class="title"><span>记录列表</span><span v-show="selectedIndex==1" class="fr btn-active" @click="sendall">一键派发</span></p>

    <Scroll :hasmore="hasmore" :pullup="pullup" setHeight="-85">
      <List :data="listData" ></List>
    </Scroll>

  </div>
</template>
<script>
import Tab from '../../common/tab'
import Scroll from '../../common/scroller'
import List from './list'
export default {
  components: {Tab,Scroll,List},
  name: "",
  data() {
    return {
      tabData:[
        {
          name:"已派发",
          click:this.changeTab,
          type:0,
        },{
          name:"待派发",
          click:this.changeTab,
          type:1,
        }

      ],
      selectedIndex:0,
      hasmore:false,
      pageInfo:{
        page:1
      },

      listData:[
        // {
        //   id:1,
        //   name:"哈哈哈",
        //   phone:"12345678128",
        //   img:"https://bpic.588ku.com/element_pic/00/16/07/285798e2ef40806.jpg",
        //   state:0,//1已派发，0未派发
        // }
      ],
    };
  },
  methods: {
    changeTab(item){
      this.selectedIndex=item.type
      this.listData=[]
      this.getList()
    },

    // 下拉刷新方法回调
    pullup(func){
      if(this.hasmore){
        this.pageInfo.page++
         _g.orderList([this.getList,func])
         return
      }
    },

    getList(){
      var url=this.selectedIndex==0?"couponApp/getSent.do":"couponApp/getToSent.do"
      var params={
        currPageNo:this.pageInfo.page,
        couponId:sessionStorage.getItem("detailId")
      }
      _g.apiPost(url,params).then(res=>{
        this.hasmore=res.data.hasNextPage
        var goal = []

        res.data.list.forEach(ele => {
          goal.push({
            id:ele.id,
            name:ele.realName,
            phone:ele.phone,
            img:ele.carNumber,
            state:this.selectedIndex==0?1:0,
          })
        });
        this.$set(this,"listData",this.listData.concat(goal))
      })
    },

    // 一键派发
    sendall(){
      this.$store.state.dialogs.sure.content="是否一键派发？"
      this.$store.state.dialogs.sure.show=true
      this.$store.state.dialogs.sure.OK=this.sendOK
    },

    sendOK(){
      var ids=[]
      this.listData.forEach(ele=>{ids.push(ele.id)})
      var params={
        userIds:ids.join(","),
        couponId:sessionStorage.getItem("detailId")
      }

      this.$store.state.dialogs.sure.show=false
      _g.apiPost("couponApp/distributeCoupon.do",params).then(res=>{
        _g.toMessage(res)
        this.listData=[]
        if(res.status==0)this.getList()
      })


      
    }
  },
  created() {
    this.getList()
  }
};
</script>
<style lang="scss" scoped>
.tosend {
  background-color: #fff;
  .tab-box{
    background-color: #f2f2f2;
    padding-bottom: 5px;
  }
  .title{
    padding: 0 15px;
    font-size: 12px;
    line-height: 30px;
    color: #666;
    border-bottom: 1px solid #DBDBDB;
  }
  .btn-active{
    border: 1px solid #FF9F20;
    line-height: 20px;
    transform: translateY(4px);
    box-sizing: border-box;
    color: #FF9F20;
    border-radius: 2px;
  }
}
.padding80{
  padding-left: 80px;
  padding-right: 80px;
}
</style>